<template>
    <div>
        <el-container>
            <el-aside width="15%" style="background:lightblue">
                <!-- 头像相关 -->
                <div class="block" style="width: 100px; height: 120px; margin-left: 50px; margin-top: 50px;">
                    <el-avatar :size="50" @error="errorHandler">
                        <img :src=imgurl @click="show()" />
                    </el-avatar>
                    <p style="font-size: 15px;color: black;">用户：{{ this.user["managerName"] }}</p>
                </div>
                <div v-if="isShow">
                    <div class="div1">
                        <div>
                            <el-upload class="upload-demo" ref="upload"
                                :action="`http://localhost:3000/backuploadimg?managerId=${this.user.managerId}`" :data="body"
                                :auto-upload="false" list-type="picture" multiple :on-preview="handlePreview"
                                :file-list="fileList" 
                                :on-success="(response, file, fileList) => {
                                    return handleSuccess(response, file, fileList);
                                }">
                                <el-button slot="trigger" size="small" type="primary">选择照片</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success"
                                    @click="submitUpload">提交</el-button>
                            </el-upload>
                        </div>
                    </div>
                </div>
                <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    @select="changesiderpage" style="margin-top: 5px;border-color: lightblue;" background-color="lightblue"
                    text-color="#000" active-text-color="deeppink" active-background-color="lightpink">
                    <el-menu-item index="user">
                        <i class="el-icon-upload"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="request">
                        <i class="el-icon-document"></i>
                        <span slot="title">需求管理</span>
                    </el-menu-item>
                    <el-menu-item index="sale">
                        <i class="el-icon-s-data"></i>
                        <span slot="title">出租管理</span>
                    </el-menu-item>
                    <el-menu-item index="address">
                        <i class="el-icon-map-location"></i>
                        <span slot="title">地址管理</span>
                    </el-menu-item>
                    <el-menu-item index="pinglun">
                        <i class="el-icon-connection"></i>
                        <span slot="title">评论管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>
  

  
<script>
export default {
    name: 'Home',
    data() {
        return {
            isCollapse: true,
            fit: 'fill',
            user: {},
            headerUrl: "",
            isShow: false,
            fileList: [],
            dialogVisible: false,
            disabled: false,
            imgurl: "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png",
            total: 60,
            filenum: 0,
            body: {}
        };
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        handlePreview(file) {
            console.log(file);
        },
        handleSuccess(response, file, fileList) {
            console.log(response, file, fileList);

        },
        errorHandler() {
            return true
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        changesiderpage(path) {
            this.$router.push(path)
        },
        // 显示选择图片的组件
        show() {
            this.isShow = !this.isShow
        },
        handleSuccess(res, file, fileList) {
            // 当提交成功之后再更改一边信息，如果没有提交的话直接显示
            // 按理说首次登录都需要去更新头像
            // 这个应该只有再success之后才执行
            console.log(res.code);
            console.log(fileList);
                console.log(file);
            if(res.code==200){
                let res1 = JSON.parse(sessionStorage.getItem('token'))
                let res2 = { ...res1, imgname: fileList[0].name }
                sessionStorage.setItem("token", JSON.stringify(res2))
                this.user.imgname = fileList[0].name
                console.log(this.user.imgname);    
            }
            // // console.log(this.user.imagename);
        },
        getimage() {
            this.imgurl = `http://localhost:3000/getimage/${this.user.imgname}`
        },
        // 获取后台存储的用户名，但是读取失败
        // 读取bb={"aa":""}对象用bb["aa"]现在赋值给user的内容就是{"userName":"lzj","pwd":"123","captcha":"6apn"}
        putname() {
            let res1 = JSON.parse(sessionStorage.getItem('token'))
            // console.log(res1.managerName);
            this.user = res1;
            // console.log(this.user.managerName);
            // console.log(user.managerName);
            // this.body = this.user["managerName"]
            // console.log(this.body);
            // console.log(this.user["userName"]);
        },
    },
    mounted() {
        this.sidebarItem = this.$route.name;
        this.putname();
        if(this.user.imgname){
            this.getimage()
        }

    }

};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 100%;
    min-height: 400px;
}

:active el-menu-vertical-demo.el-menu-item {
    background-color: lightcoral;
}

.div1 {
    border: 2px dotted lightblue;
    width: 200px;
    height: 130px;
    /* margin-left: 670px;
    margin-top: -400px; */
    background-color: lightblue;
}
</style>